<template>
  <div class="execution">
    <basic-container>
      <el-card shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="handleAdd()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
          <el-table-column
            label="名称"
            align="center"
            prop="name"
          ></el-table-column>
          <el-table-column label="URL" align="center" prop="jumpUrl">
          </el-table-column>
          <el-table-column
            label="ios分享"
            align="center"
            prop="iosShare"
          ></el-table-column>
          <el-table-column
            label="ios下载地址"
            align="center"
            prop="iosDownload"
          ></el-table-column>
          <el-table-column
            label="安卓分享"
            align="center"
            prop="androidShare"
          ></el-table-column>
          <el-table-column
            label="安卓下载地址"
            align="center"
            prop="androidDownload"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="极光appkey"
            prop="jgAppkey"
            align="center"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="极光Secret"
            prop="jgSecret"
            align="center"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="极光私钥"
            prop="jgPrivateKey"
            align="center"
          ></el-table-column>

          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
          ></el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                @click="handleUpdata(row)"
                type="text"
                plain
                >编辑</el-button
              >

              <el-button
                size="mini"
                @click="handleDelete(row)"
                type="text"
                plain
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog
        :title="titleDialog"
        :visible.sync="dialogVisible"
        :before-close="close"
        width="40%"
      >
        <el-form
          :model="appAddForm"
          :rules="rules"
          ref="appAddForm"
          label-width="150px"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="appAddForm.name"></el-input>
          </el-form-item>
          <el-form-item label="URL:" prop="jumpUrl">
            <el-input v-model="appAddForm.jumpUrl"></el-input>
          </el-form-item>
          <el-form-item label="ios分享:" prop="jumpUrl">
            <el-input v-model="appAddForm.iosShare"></el-input>
          </el-form-item>
          <el-form-item label="ios下载地址:" prop="jumpUrl">
            <el-input v-model="appAddForm.iosDownload"></el-input>
          </el-form-item>
          <el-form-item label="安卓分享:" prop="jumpUrl">
            <el-input v-model="appAddForm.androidShare"></el-input>
          </el-form-item>
          <el-form-item label="安卓下载地址:" prop="jumpUrl">
            <el-input v-model="appAddForm.androidDownload"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('appAddForm')"
              >提交</el-button
            >
            <el-button type="info" @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import "@/styles/index.scss";
import {
  platformPage,
  addPlatform,
  updatePlatform,
  deletePlatform,
} from "@/api/config/index";

const defaultAppAddForm = {
  id: null,
  name: null,
  jumpUrl: null,
  iosShare: null,
  androidShare: null,
  iosDownload: null,
  androidDownload: null
};

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
      },
      list: [],
      total: 0,
      titleDialog: "添加",
      dialogVisible: false,
      platformAllOption: [],
      platStoreOption: [],
      appAddForm: Object.assign({}, defaultAppAddForm),
      rules: {
        name: [
          {
            required: true,
            message: "请填写名称",
            trigger: "change",
          },
        ],
        jumpUrl: [{ required: true, message: "请填写URL", trigger: "change" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      platformPage(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleAdd() {
      this.titleDialog = "添加";
      this.dialogVisible = true;
    },
    handleUpdata(row) {
      this.titleDialog = "编辑";
      this.dialogVisible = true;
      this.appAddForm = Object.assign({}, row);
    },
    close() {
      this.dialogVisible = false;
      this.appAddForm = Object.assign({}, defaultAppAddForm);
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.titleDialog === "编辑") {
            updatePlatform(this.appAddForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.close();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          } else {
            addPlatform(this.appAddForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.close();
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          }
        }
      });
    },
    handleDelete(row) {
      let that = this;
      that
        .$confirm("是否确认删除ID为" + row.id, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          deletePlatform({ id: row.id }).then((res) => {
            if (res.data.code === 200) {
              that.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              that.getList();
            } else {
              that.$message({
                message: res.data.msg,
                type: "warning",
                duration: 1000,
              });
            }
          });
        });
    },
  },
};
</script>

    <style>
</style>
